<template>
  <div class="modern-page">
    <div class="register-card modern-card modern-card--lg modern-slide-in">
      <div class="register-header modern-card__header">
        <div class="logo-section">
          <component :is="'BuildingIcon'" class="logo-icon modern-float" />
          <h1 class="logo-title modern-text-gradient">供应链ERP系统</h1>
        </div>
        <h2 class="register-title">用户注册</h2>
        <p class="register-subtitle">创建您的账户以开始使用</p>
      </div>

      <div class="register-form modern-card__content">
        <t-form
          ref="registerForm"
          :model="formData"
          :rules="formRules"
          layout="vertical"
          @submit="handleRegister"
        >
          <div v-for="(fieldGroup, groupIndex) in formFields" :key="groupIndex" class="form-group">
            <t-row :gutter="16">
              <t-col 
                v-for="field in fieldGroup" 
                :key="field.name" 
                :span="field.span || 24"
              >
                <t-form-item 
                  :name="field.name" 
                  :label="field.label"
                  :required="field.required"
                >
                  <!-- 输入框类型 -->
                  <t-input
                    v-if="field.type === 'input'"
                    v-model="formData[field.name]"
                    :type="field.inputType || 'text'"
                    :placeholder="field.placeholder"
                    :disabled="field.disabled"
                    size="large"
                    clearable
                    class="modern-input"
                  >
                    <template v-if="field.icon" #prefix-icon>
                      <component :is="field.icon" />
                    </template>
                  </t-input>

                  <!-- 密码框类型 -->
                  <t-input
                    v-else-if="field.type === 'password'"
                    v-model="formData[field.name]"
                    type="password"
                    :placeholder="field.placeholder"
                    :disabled="field.disabled"
                    size="large"
                    clearable
                    class="modern-input"
                  >
                    <template v-if="field.icon" #prefix-icon>
                      <component :is="field.icon" />
                    </template>
                  </t-input>

                  <!-- 选择框类型 -->
                  <t-select
                    v-else-if="field.type === 'select'"
                    v-model="formData[field.name]"
                    :placeholder="field.placeholder"
                    :disabled="field.disabled"
                    size="large"
                    clearable
                    class="modern-select"
                  >
                    <t-option
                      v-for="option in field.options"
                      :key="option.value"
                      :value="option.value"
                      :label="option.label"
                    />
                  </t-select>

                  <!-- 日期选择器类型 -->
                  <t-date-picker
                    v-else-if="field.type === 'date'"
                    v-model="formData[field.name]"
                    :placeholder="field.placeholder"
                    :disabled="field.disabled"
                    size="large"
                    clearable
                    class="modern-date-picker"
                  />

                  <!-- 复选框类型 -->
                  <t-checkbox
                    v-else-if="field.type === 'checkbox'"
                    v-model="formData[field.name]"
                    :disabled="field.disabled"
                  >
                    {{ field.checkboxText }}
                  </t-checkbox>
                </t-form-item>
              </t-col>
            </t-row>
          </div>

          <div class="form-actions">
            <t-button
              type="submit"
              theme="primary"
              size="large"
              block
              :loading="loading"
              class="modern-btn-enhance"
            >
              {{ loading ? '注册中...' : '立即注册' }}
            </t-button>
          </div>
        </t-form>

        <div class="register-footer">
          <div class="login-link">
            已有账户？
            <t-link theme="primary" @click="$router.push('/auth/login')">
              立即登录
            </t-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle decoration-circle-1 modern-pulse"></div>
      <div class="decoration-circle decoration-circle-2 modern-float"></div>
      <div class="decoration-circle decoration-circle-3 modern-pulse"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { MessagePlugin } from 'tdesign-vue-next'

const router = useRouter()

// 表单引用
const registerForm = ref()

// 加载状态
const loading = ref(false)

// 表单数据
const formData = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  companyName: '',
  department: '',
  position: '',
  userType: '',
  birthday: '',
  agreeTerms: false
})

// 表单字段配置
const formFields = ref([
  [
    {
      name: 'username',
      label: '用户名',
      type: 'input',
      placeholder: '请输入用户名',
      icon: 'UserIcon',
      required: true,
      span: 12
    },
    {
      name: 'email',
      label: '邮箱地址',
      type: 'input',
      inputType: 'email',
      placeholder: '请输入邮箱地址',
      icon: 'MailIcon',
      required: true,
      span: 12
    }
  ],
  [
    {
      name: 'phone',
      label: '手机号码',
      type: 'input',
      inputType: 'tel',
      placeholder: '请输入手机号码',
      icon: 'PhoneIcon',
      required: true,
      span: 12
    },
    {
      name: 'userType',
      label: '用户类型',
      type: 'select',
      placeholder: '请选择用户类型',
      required: true,
      span: 12,
      options: [
        { value: 'admin', label: '系统管理员' },
        { value: 'manager', label: '部门经理' },
        { value: 'employee', label: '普通员工' },
        { value: 'supplier', label: '供应商' },
        { value: 'customer', label: '客户' }
      ]
    }
  ],
  [
    {
      name: 'password',
      label: '登录密码',
      type: 'password',
      placeholder: '请输入登录密码',
      icon: 'LockOnIcon',
      required: true,
      span: 12
    },
    {
      name: 'confirmPassword',
      label: '确认密码',
      type: 'password',
      placeholder: '请再次输入密码',
      icon: 'LockOnIcon',
      required: true,
      span: 12
    }
  ],
  [
    {
      name: 'companyName',
      label: '公司名称',
      type: 'input',
      placeholder: '请输入公司名称',
      icon: 'BuildingIcon',
      span: 12
    },
    {
      name: 'department',
      label: '部门',
      type: 'input',
      placeholder: '请输入所属部门',
      icon: 'UserGroupIcon',
      span: 12
    }
  ],
  [
    {
      name: 'position',
      label: '职位',
      type: 'input',
      placeholder: '请输入职位',
      icon: 'UserCircleIcon',
      span: 12
    },
    {
      name: 'birthday',
      label: '出生日期',
      type: 'date',
      placeholder: '请选择出生日期',
      span: 12
    }
  ],
  [
    {
      name: 'agreeTerms',
      label: '',
      type: 'checkbox',
      checkboxText: '我已阅读并同意用户协议和隐私政策',
      required: true,
      span: 24
    }
  ]
])

// 表单验证规则
const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, message: '用户名只能包含字母、数字、下划线和中文', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  userType: [
    { required: true, message: '请选择用户类型', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' },
    { pattern: /^(?=.*[a-zA-Z])(?=.*\d)/, message: '密码必须包含字母和数字', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (val: string) => {
        if (val !== formData.password) {
          return { result: false, message: '两次输入的密码不一致', type: 'error' }
        }
        return { result: true }
      },
      trigger: 'blur'
    }
  ],
  agreeTerms: [
    {
      validator: (val: boolean) => {
        if (!val) {
          return { result: false, message: '请先同意用户协议和隐私政策', type: 'error' }
        }
        return { result: true }
      },
      trigger: 'change'
    }
  ]
}

// 处理注册
const handleRegister = async () => {
  try {
    // 表单验证
    const valid = await registerForm.value?.validate()
    if (!valid) return

    loading.value = true

    // 模拟注册API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 注册成功
    MessagePlugin.success('注册成功！即将跳转到登录页面')
    
    // 延迟跳转到登录页面
    setTimeout(() => {
      router.push('/auth/login')
    }, 1500)

  } catch (error) {
    console.error('注册失败:', error)
    MessagePlugin.error('注册失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
@use '@/assets/styles/variables.scss' as *;

.register-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.logo-icon {
  font-size: 2.25rem;
  color: #4f46e5;
}

.logo-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.025em;
}

.register-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--modern-text-primary);
  margin: 0 0 0.5rem 0;
  background: var(--modern-gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.register-subtitle {
  font-size: 1rem;
  color: var(--modern-text-muted);
  margin: 0;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

:deep(.t-form-item) {
  margin-bottom: 1.25rem;
}

:deep(.t-form-item__label) {
  font-weight: 600;
  color: var(--modern-text-secondary);
  margin-bottom: 0.5rem;
}

:deep(.modern-input) {
  border-radius: var(--modern-radius-md);
  transition: var(--modern-transition-normal);
  
  &:hover {
    box-shadow: var(--modern-shadow-sm);
  }
  
  &.t-is-focused {
    box-shadow: var(--modern-shadow-md);
    border-color: rgba(99, 102, 241, 0.5);
  }
}

:deep(.modern-select .t-input) {
  border-radius: var(--modern-radius-md);
  transition: var(--modern-transition-normal);
  
  &:hover {
    box-shadow: var(--modern-shadow-sm);
  }
  
  &.t-is-focused {
    box-shadow: var(--modern-shadow-md);
    border-color: rgba(99, 102, 241, 0.5);
  }
}

:deep(.modern-date-picker .t-input) {
  border-radius: var(--modern-radius-md);
  transition: var(--modern-transition-normal);
  
  &:hover {
    box-shadow: var(--modern-shadow-sm);
  }
  
  &.t-is-focused {
    box-shadow: var(--modern-shadow-md);
    border-color: rgba(99, 102, 241, 0.5);
  }
}

:deep(.modern-date-picker) {
  width: 100%;
}

:deep(.t-checkbox) {
  color: var(--modern-text-secondary);
}

:deep(.t-checkbox__label) {
  font-size: 0.875rem;
}

.form-actions {
  margin-top: 2rem;
}

:deep(.t-button) {
  border-radius: var(--modern-radius-md);
  height: 3rem;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--modern-transition-normal);
  background: var(--modern-gradient-primary);
  border: none;
  
  &:hover {
    background: var(--modern-gradient-secondary);
  }
}

.register-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.login-link {
  font-size: 0.875rem;
  color: var(--modern-text-muted);
}

:deep(.t-link) {
  font-weight: 600;
  text-decoration: none;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--modern-glass-bg-ultra-light);
  backdrop-filter: var(--modern-blur-md);
}

.decoration-circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
}

.decoration-circle-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
}

.decoration-circle-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .modern-page {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .register-card {
    max-width: 100%;
  }
  
  .form-group :deep(.t-col) {
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  .modern-page {
    padding: 1rem;
  }
  
  .decoration-circle {
    display: none;
  }
  
  .form-group :deep(.t-col) {
    width: 100% !important;
    flex: none !important;
  }
}

@media (max-width: 480px) {
  .logo-section {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style>
